<template>
  <div id="CardList">
    <div class="coupon_table_box">
      <div v-show="newStatus === 0">
        <el-table
          :data="CouponTabale"
          style="width: 100%"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form
                label-position="left"
                inline
                class="demo-table-expand"
              >
                <el-form-item label="优惠券金额">
                  <span>￥{{ props.row.reduceAmount }}</span>
                </el-form-item>
                <el-form-item label="使用规则">
                  <span>满{{ props.row.startAmount }}减￥{{ props.row.discount }}</span>
                </el-form-item>
                <el-form-item label="使用范围">
                  <span>{{ props.row.scopeType === 1? "全店通用": props.row.scopeType === 2? "适用范围为商品分类": props.row.scopeType === 3? "适用范围为商品": props.row.iType === 4? "使用范围为SKU": props.row.scopeStr }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>

          <el-table-column
            prop="couponCoding"
            label="卡券编号"
          />

          <el-table-column
            prop="cEPName"
            label="优惠券名称"
          />

          <el-table-column label="优惠券类型">
            <template slot-scope="scope">
              {{ scope.row.iType === 1? "代金券": scope.row.iType === 2? "折扣券": scope.row.iType === 5? "记次卡": scope.row.iType === 6? "兑换券": scope.row.iTypeName }}
            </template>
          </el-table-column>

          <el-table-column
            label="有效时间"
            width="200"
          >
            <template slot-scope="scope">
              {{ scope.row.expireStartDate | formatDate(2) }} 至
              {{ scope.row.expireEndDate | formatDate(2) }}
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <div
                class="again"
                @click="DeleteData(scope.row)"
              >
                删除
              </div>
              <div
                class="again"
                @click="ImmediateUse(scope.row)"
              >
                立即使用
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 已使用 -->
      <div v-show="newStatus === 2">
        <el-table
          :data="CouponTabale"
          style="width: 100%"
        >
          <el-table-column
            prop="title"
            label="抵用券"
          />

          <el-table-column
            prop="couponCoding"
            label="券号"
          />

          <el-table-column
            label="使用时间"
          >
            <template slot-scope="scope">
              {{ scope.row.userDate | formatDate(2) }}
            </template>
          </el-table-column>

          <el-table-column
            prop="orderId"
            label="订单号"
          />
        </el-table>
      </div>
      <!-- 已使用END -->
      <div v-show="newStatus === 3">
        <el-table
          :data="CouponTabale"
          style="width: 100%"
        >
          <el-table-column
            prop="title"
            label="抵用券"
          />

          <el-table-column
            prop="couponCoding"
            label="券号"
          />

          <el-table-column
            label="有效时间"
            width="200"
          >
            <template slot-scope="scope">
              {{ scope.row.expireStartDate | formatDate(2) }} 至
              {{ scope.row.expireEndDate | formatDate(2) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination_box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="PageTotal"
        :current-page.sync="pageIndex"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "CardList",
  props: {
    status: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      PageTotal: 0,
      newStatus: 0,
      pageIndex: 1, // 分页索引
      pageSize: 10, // 单页数量,
      CouponTabale: [], // 表格数据
    };
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {
    status: function () {
      this.newStatus = this.status;
      this.pageIndex = 1;
      this.getCouponList(this.newStatus);
    },
  },

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.newStatus = this.status;
    this.getCouponList(this.status);
  },

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 获取优惠券
    getCouponList(status) {
      let params = {
        token: localStorage.getItem("token"),
        data: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          status: status,
          orderBy: "reduceAmount",
          sequence: 1,
        },
      };
      this.$api.person.getCouponList(params).then((res) => {
        console.log("获取优惠券", res.data);
        if (res.code == 200) {
          console.log("获取优惠券", res.data);
          this.CouponTabale = res.data.CouponUsage;
          this.PageTotal = res.data.count;
        }
      });
    },
    // 分页获取当前页
    handleCurrentChange(val) {
      console.log("分页获取当前页", val);
      this.pageIndex = val;
      this.getCouponList(this.newStatus);
    },
    // 删除DeleteGiftCard
    DeleteData(DeleteData) {
      console.log('删除', DeleteData)
      let params={
        token: localStorage.getItem("token"),
        data: {
          id:DeleteData.couponCoding,
        },
      }
      this.$api.person.DeleteCoupon(params).then((res) => {
        if(res.code === 200) {
          this.$message.success(res.message)
          this.getCouponList(this.status)
        }  else {
          this.$message.error(res.message)
        }
      })
    },
    // 立即使用
    ImmediateUse(ImmediateUse) {
      console.log('立即使用', ImmediateUse)
      this.$router.push({
          path: "/fruit",
        });
    }
  },
};
</script>

<style style lang='scss' scoped>
#CardList {
  height: 70.5rem;
  background: #fff;
  .coupon_table_box {
    padding: 0 2.62rem;
  }
  .pagination_box {
    padding: 0 2.62rem;
    display: flex;
    justify-content: center;
    height: 3rem;
    align-items: center;
  }
  .again {
    color: #f0406f;
    font-size: 0.88rem;
    float: left;
    width: 50%;
    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }
}
</style>

<style>
.pagination_box
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: rgba(17, 17, 17, 1);
  color: #fff;
}
.pagination_box .el-pagination.is-background .el-pager li:hover {
  color: rgba(17, 17, 17, 1);
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>